<template>
  <div>


    <div class="con">
      <div class="p-show">
        <img :src="detail.art.img" alt="Logo">
        <h2>【{{ detail.art.alt }}{{ detail.art.name }}】</h2>
      </div>
    </div>
    <div class="w1100">
      <div class="container">
        <div class="left">
          <p>{{ detail.listArt[0].introduce }}</p>
        </div>
        <div class="else">
          <el-table :data="detail.listStore" @row-click="rowClick"
                    height="200" style="width: 100%;  " size="small"
                    :header-cell-style="{ backgroundColor: '#fcf5e8', color: '#070303', fontSize: '14px', textAlign: 'center'}"
                    :cell-style="{  backgroundColor: '#fcf5e8',color: '#000000', fontSize: '14px', textAlign: 'center', }">
            <el-table-column prop="store" label="体验店"/>
            <el-table-column prop="name" label="项目名称"/>
            <el-table-column prop="location" label="地址"/>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, reactive} from 'vue';
import {useRoute} from "vue-router";
import {getRegionalCultureApi} from "@/api/district";
import {getArtAPi, getStoreAPi} from "@/api/art";
import router from "@/router";


// 热门体验店数据
const stores = ref([
  {name: '体验店一', link: '#'},
  {name: '体验店二', link: '#'},
  {name: '体验店三', link: '#'}
]);

const currentImageIndex = ref(0);

const showImage = (index: number) => {
  currentImageIndex.value = index;
};

// 获取当前路由
const route = useRoute();

// 获取数据的函数

function getData() {
  getArtAPi({id: detail.art.id}).then((res) => {
    console.log(res)
    detail.listArt = res.data
  })

  getStoreAPi({name: detail.art.name}).then((res) => {
    detail.listStore = res.data
  })
}

const detail = reactive({art: {id: '', img: '', alt: '', sheng: '',name: ''}, listArt: [{introduce: ""}], listStore: []})
// 切换图片的定时器
onMounted(() => {
  Object.assign(detail.art, route.query);
  getData()
});

function rowClick(row: any, column: any, event: Event) {
  router.push({path: '/storeDetail', query: row});
}

</script>

<style scoped>
.el-table {
  background-color: #fcf5e8 !important;
}

.else {
  width: 50%;
  border: 2px solid rgba(200, 200, 200, 0.3);
  border-radius: 10px; /* 可以根据需要调整圆角 */
  margin: 20px; /* 可以根据需要调整外边距 */
}

.container1 {
  display: flex;
}

.left-side {
  flex: 1;
}

.right-side {
  flex: 2;
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.carousel img {
  width: 100%;
  height: auto;
  position: absolute;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.carousel img.active {
  opacity: 1;
}

.intro {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

.links ul {
  list-style-type: none;
  padding: 0;
}

.links li {
  margin: 10px 0;
}

.links a {
  text-decoration: none;
  color: #007bff;
}
</style>
